<template>
    <div>
        <el-radio-group v-model="type" @change="showChart">
            <el-radio-button label="班级人数统计"></el-radio-button>
            <el-radio-button label="年龄分布统计"></el-radio-button>
            <el-radio-button label="地图"></el-radio-button>
        </el-radio-group>
        <div class="total" id="myChart" ref="myChart"></div>
    </div>
</template>
<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar"
// 引入饼状图
import "echarts/lib/chart/pie";
// 引入地图
import "echarts/lib/chart/scatter";
import "echarts/extension/bmap/bmap";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

// import axios from "axios";
import {classCount,ageProportion,cityShopCount,cityShop} from '../service/total'
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

// import BMap from 'BMap'
export default {
    data() {
        return {
            type: "班级人数统计",
            classAxisData: [],
            classSeriesData: [],
            ageAxisData: [],
            ageSeriesData: [],
            shopsCountData: [],
            shopsData: [],
            zoom: 0
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.showChart();
        });
    },

    methods: {
        async showChart() {
            // 销毁之前的实例
            echarts.dispose(this.$refs.myChart);
            // 重新创建新的实例
            let myChart = echarts.init(this.$refs.myChart);
            
            if (this.type == "班级人数统计") {           
                let data = await classCount();
                this.classAxisData = data.classAxisData;
                this.classSeriesData = data.classSeriesData;
                myChart.setOption(this.classesOptions, true);
            } else if (this.type == "年龄分布统计") {
                let data = await ageProportion();
                this.ageAxisData = data.ageAxisData;
                this.ageSeriesData = data.ageSeriesData;
                myChart.setOption(this.ageOpitons, true);
            } else {
                
                let data = await cityShopCount();
                this.shopsCountData = data;
                myChart.setOption(this.mapOptions, true);
                myChart.on("finished", async () => {
                    // 从echarts对象中获取bmap对象
                    var bmap = myChart
                        .getModel()
                        .getComponent("bmap")
                        .getBMap();
                    // 设置最小缩放值
                    bmap.setMinZoom(5);
                    // 设置最大缩放值
                    // bmap.setMaxZoom(15);
                    // 设置地图样式
                    bmap.setMapStyleV2({
                        styleId: 'fdd63329cca4c204b1b2205774568f19'
                    })
                    // 缩放结束后的事件
                    bmap.addEventListener("zoomend", async e => {
                        
                        let zoom = this.zoom;
                        this.zoom = bmap.getZoom();
                        console.log(zoom,bmap.getZoom())
                        // 打印出当前缩放值
                        if (zoom < bmap.getZoom() && bmap.getZoom() == 10) {
                           
                            let data = await cityShop();
                            this.shopsData = data;
                            let options = this.mapOptions;
                            options.bmap.zoom = 10;
                            myChart.setOption(this.mapOptions, false);

                        } else if (
                            zoom > bmap.getZoom() &&
                            bmap.getZoom() <= 10
                        ) {
                            this.shopsData = [];
                            let options = this.mapOptions;
                            myChart.setOption(this.mapOptions, false);
                        }
                    });
                });
            }
        }
    },
    computed: {
        classesOptions() {
            return {
                title: {
                    text: "班级人数的统计图"
                },
                tooltip: {},
                xAxis: {
                    data: this.classAxisData
                },
                yAxis: {},
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: this.classSeriesData
                    }
                ]
            };
        },
        ageOpitons() {
            return {
                title: {
                    text: "各个阶段年龄分布",
                    subtext: "纯属虚构",
                    x: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: this.ageAxisData
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: this.ageSeriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            };
        },
        mapOptions() {
            return {
                title: {
                    text: "全国门店统计",
                    left: "center",
                    textStyle: {
                        color: "#fff"
                    }
                },
                tooltip: {
                    trigger: "item"
                },
                bmap: {
                    center: [104.072259, 30.663403],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson:[] 
                        
                    }
                },
                series: [
                    {
                        name: "门店数",
                        type: "scatter",
                        coordinateSystem: "bmap",
                        data: this.shopsCountData,
                        symbolSize: function(val) {
                            return val[2] * 2;
                        },
                        // label: {
                        //     show: true,
                        //     formatter: function(params) {
                        //         return params.data[3];
                        //     }
                        // },
                        itemStyle: {
                            normal: {
                                color: "#ddb926"
                            }
                        },
                        tooltip: {
                            formatter: function(params, ticket, callback) {
                                return (
                                    "城市：" +
                                    params.data[3] +
                                    "<br>门店数：" +
                                    params.data[2]
                                );
                            }
                        }
                    },
                    {
                        name: "门店位置",
                        type: "scatter",
                        coordinateSystem: "bmap",
                        data: this.shopsData,
                        symbol: "pin",
                        symbolSize: 20,
                        itemStyle: {
                            normal: {
                                color: "red"
                            }
                        },
                        tooltip: {
                            formatter: function(params, ticket, callback) {
                                return (
                                    "店铺名称：" +
                                    params.data[2] +
                                    "<br>地址：" +
                                    params.data[3]
                                );
                            }
                        }
                    }
                ]
            };
        }
    }
};
</script>
<style scoped>
.total {
    width: 100%;
    height: 500px;
}
</style>

